import './index.less'
import { useState, useRef } from 'react'
import { Modal, Button, Form, Input, Select, Flex } from 'antd';
import type { FormInstance } from 'antd/es/form';
interface PropsType {
    opens: boolean
    setOpens: (opens: boolean) => void;
}
const { Option } = Select;

function Add(props: PropsType) {
    const { opens, setOpens } = props
    const [confirmLoading, setConfirmLoading] = useState(false);

    const handleOk = () => {
        setConfirmLoading(true);
        setTimeout(() => {
            setConfirmLoading(false);
        }, 2000);
    };

    const handleCancel = () => {
        onReset()
        setOpens(false);
    };
    // form
    const formRef = useRef<FormInstance>(null);

    const onGenderChange = (value: string) => {
        switch (value) {
            case 'male':
                formRef.current?.setFieldsValue({ note: 'Hi, man!' });
                break;
            case 'female':
                formRef.current?.setFieldsValue({ note: 'Hi, lady!' });
                break;
            case 'other':
                formRef.current?.setFieldsValue({ note: 'Hi there!' });
                break;
            default:
                break;
        }
    };

    const onFinish = (values: any) => {
        console.log(values);
    };

    const onReset = () => {
        formRef.current?.resetFields();
    };

    const onFill = () => {
        formRef.current?.setFieldsValue({ note: 'Hello world!', gender: 'male' });
    }

    return (
        <>
            <Modal
                title="添加"
                width={800}
                style={{ top: 70 }}
                open={opens}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
                footer={null}
            >
                <Form
                    ref={formRef}
                    name="control-ref"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    onFinish={onFinish}
                    style={{ maxWidth: '100%' }}
                >
                    <div className='add_main'>
                        <Form.Item name="note" label="Note" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name="gender" label="Gender" rules={[{ required: true }]}>
                            <Select
                                placeholder="Select a option and change input text above"
                                onChange={onGenderChange}
                                allowClear
                            >
                                <Option value="male">male</Option>
                                <Option value="female">female</Option>
                                <Option value="other">other</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            noStyle
                            shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
                        >
                            {({ getFieldValue }) =>
                                getFieldValue('gender') === 'other' ? (
                                    <Form.Item name="customizeGender" label="Customize Gender:" rules={[{ required: true }]}>
                                        <Input />
                                    </Form.Item>
                                ) : null
                            }
                        </Form.Item>
                    </div>
                    <div className='form_btn'>
                        <Flex gap="small" wrap="wrap">
                            <Button onClick={() => { handleCancel() }}>取消</Button>
                            <Button type="primary" htmlType="submit" >确认</Button>
                        </Flex>
                    </div>
                </Form>
            </Modal>
        </>
    );
}

export default Add;